<template>
  <div>
    <b-row align-v="center">
      <b-col md="auto">
        <b-form-group label="景区查询:">
          <b-form-checkbox-group
            id="checkbox-group-1"
            v-model="selected"
            :options="options"
            name="flavour-1"
            @change="getScenery"
            ref="sc"
          ></b-form-checkbox-group>
        </b-form-group>
      </b-col>
      <b-col md="auto">
        <b-button variant="outline-primary" size="sm" @click="VisibleAllScenery"
          >所有景区</b-button
        >
      </b-col>
    </b-row>
    <Search :qinfo="queryTable"></Search>
  </div>
</template>

<script>
import bus from "../../eventBus.js";
import QS from "qs";
import Search from "./search.vue";
export default {
  name: "Scenery",
  props: ["map"],
  data() {
    return {
      selected: [],
      options: [
        { text: "5A级景区", value: "5A" },
        { text: "4A级景区", value: "4A" },
        { text: "3A级景区", value: "3A" },
      ],
      sceneryName: null,
      scenerymap: null,
      scenery: {},
      AllScenery: {},
      SceneryMarker: null,
      markerLay: null,
      panelScenery: null,
      queryScenery: [],
      queryTable: "scenery",
    };
  },
  created() {
    this.getAllScenery();
    window.SceneryAtt = this.handleClick;
  },
  mounted() {},
  methods: {
    getAllScenery() {
      this.$axios
        .get("http://127.0.0.1/scenery/grade", {
          params: {
            Grade: "A",
          },
        })
        .then((res) => {
          this.AllScenery = res.data;
        });
    },
    VisibleAllScenery() {
      const map = this.scenerymap;
      let layers = [];
      if (this.selected.length != 0) {
        this.markerLay.clearLayers();
      }
      if (this.SceneryMarker != null) {
        this.SceneryMarker.clearLayers();
        this.SceneryMarker = null;
      } else {
        for (let i = 0; i < this.AllScenery.length; i++) {
          let markers = L.marker([
            this.AllScenery[i].lat,
            this.AllScenery[i].lon,
          ]);
          layers.push(markers);
        }
        this.SceneryMarker = L.layerGroup(layers);
        map.addLayer(this.SceneryMarker);
      }
    },
    getScenery() {
      const map = this.scenerymap;
      let layers = [];
      let grade = this.selected;
      this.$axios
        .get("http://127.0.0.1/scenery/grade", {
          params: {
            Grade: grade,
          },
          paramsSerializer: function (params) {
            return QS.stringify(params, { indices: false });
          },
        })
        .then((res) => {
          this.scenery = res.data;
          if (this.markerLay != null) {
            this.markerLay.clearLayers();
          }
          for (let i = 0; i < this.scenery.length; i++) {
            const name = this.scenery[i].name;
            const popupContent = `<p>景区名称：</p><b style="font-size:15px">${name}</b><p style="text-align: right;"><a href="#/scenery"  id="msg" onclick="SceneryAtt()">详细信息</a></p>`;
            let markers = L.marker([
              this.scenery[i].lat,
              this.scenery[i].lon,
            ]).bindPopup(popupContent);
            markers.on("popupopen", () => {
              this.panelScenery = this.scenery[i];
            });
            layers.push(markers);
          }
          this.markerLay = L.layerGroup(layers);
          map.addLayer(this.markerLay);
        });
      if (this.selected.length == 0) {
        this.markerLay.clearLayers();
      }
    },
    handleClick() {
      const map = this.scenerymap;
      const lat = this.panelScenery.lat;
      const lon = this.panelScenery.lon;
      map.flyTo([lat, lon], 15, {
        duration: 0.1,
      });
      //异步发送数据
      setTimeout(() => {
        this.sendScenery();
      }, 0);
      //控制属性面板显示
      bus.$emit("VisibPanel", "True");
    },
    sendScenery() {
      bus.$emit("shareScenery", this.panelScenery);
    },
  },
  components: {
    Search,
  },
  watch: {
    map: function (newVal) {
      this.scenerymap = newVal;
    },
  },
};
</script>

<style scoped>
input {
  width: 200px;
}
</style>